/**
 * Copyright 2018 California Institute of Technology.
 *
 * This source code is licensed under the APACHE 2.0 license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

@import "~styles/colors";

:global(.highcharts-title) {
    width: calc(100% - 10rem);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6rem;
}

:global(.highcharts-tooltip) {
    :global(.tooltip-table) {
        // display: inline-block;
        display: block;
        width: 54.8rem;
        padding: 0.7rem 0.5rem 0px 0.5rem;
        :global(.tooltip-title) {
            display: block;
            color: lighten(black, 40%);
            font-weight: 500;
            margin-bottom: 0.3rem;
        }
        :global(.tooltip-table-row) {
            display: inline-block;
            // display: block;
            margin-right: 1rem;
            line-height: 1.6rem;
        }
        :global(.tooltip-key) {
            display: inline-block;
            font-weight: 400;
            color: lighten(black, 40%);
            text-transform: capitalize;
            line-height: 1.6rem;
            margin-right: 0.7rem;
        }
        :global(.tooltip-value) {
            display: inline-block;
            font-weight: 500;
            line-height: 1.6rem;
            letter-spacing: 0.25px;
        }
    }
}
:global(.highcharts-reset-zoom) {
    text-align: center;
    :global(.highcharts-button-box) {
        fill: white;
        stroke: none;
    }
    text {
        color: $color-primary !important;
        fill: $color-primary !important;
    }
}

.root {
    display: block;
    position: relative;
    width: calc(100% - 10px);
    height: 30rem;
    margin: auto;
    overflow: hidden;
    text-align: left;
    margin-bottom: 1.4rem;
    user-select: none;
}

.chart {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    &.dateLinked {
        :global(.highcharts-reset-zoom) {
            display: none;
        }
    }
}

.error {
    top: 50%;
}

.loadingWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(white, 0.85);
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition: visibility 0ms linear 500ms, opacity 161ms cubic-bezier(0.4, 0, 0.2, 1) 500ms;
    &.loadingHidden {
        opacity: 0;
        visibility: hidden;
        transition: visibility 0ms linear 0s, opacity 0s cubic-bezier(0.4, 0, 0.2, 1) 0s;
        pointer-events: none;
    }
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: capitalize;
}
